<template>
  <div class="add-teacher">
    <el-dialog
      title="编辑信息"
      :visible.sync="dialogVisible"
      width="1000px"
      :close-on-click-modal="false"
      @closed="resetForm('form')"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="20">
            <el-col :span="24" class="account-box" v-show="form.account">
              <el-form-item label="账号" prop="account">
                <el-input v-model.trim="form.account" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="姓名" prop="userName">
                <el-input v-model.trim="form.userName" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="联系电话" prop="phone">
                <el-input v-model.trim="form.phone" disabled></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item label="头像" prop="attachmentId">
            <UploadHeadPic
              v-if="dialogVisible"
              :defaultValue="userInfo.sysAttachment"
              @e-headPicId="setHeadPic"
            />
          </el-form-item>
          <el-form-item label="简介">
            <UEditor
              v-if="dialogVisible"
              ref="ueditor"
              :ueWidth="875"
              :defaultMsg="form.content"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="custom" v-preventReClick @click="submitForm('form')"
          >提 交</el-button
        >
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { tbUserUpdate, tbUserQueryOne } from '@/api/admin/user/user-manage.js'
import Bus from '@/utils/bus.js'
import { cloneDeep, pick } from 'lodash'
export default {
  components: {
    UploadHeadPic: () => import('@/components/uploadHeadPic'),
  },
  data() {
    return {
      dialogVisible: false,
      apply: false, //申请账号
      accountAali: 0,
      form: {
        id: '',
        account: '',
        userName: '', //昵称
        jobTitle: '', //职称
        deptId: '', //部门id
        phone: '', //电话
        attachmentId: '', //头像
        content: '',
        del: 1, //1.可用 2.不可用
      },
      userInfo: {},
    }
  },
  mounted() {
    Bus.$on('showDialogCourseTeamEditTeacher', (row) => {
      this.getUserInfo(row.sysUser.id)
    })
  },
  beforeDestroy() {
    Bus.$off('showDialogCourseTeamEditTeacher')
  },
  methods: {
    getUserInfo(id) {
      tbUserQueryOne(id).then((res) => {
        this.userInfo = cloneDeep(res.data.data[0])
        Object.assign(this.form, this.userInfo)
        this.dialogVisible = true
      })
    },
    setHeadPic(v) {
      this.form.attachmentId = v
    },
    submitForm() {
      this.form.content = this.$refs.ueditor.message
      let obj = pick(this.form, ['id', 'attachmentId', 'content'])

      this.edit(obj)
    },
    //添加用户
    edit(obj) {
      tbUserUpdate(obj).then((res) => {
        Bus.$emit('refreshCourseTeam')
        this.dialogVisible = false
      })
    },

    //重置表单
    resetForm(form) {
      this.apply = false
      this.accountAali = 0
      this.$refs[form].resetFields()
      for (let key in this.form) {
        this.form[key] = ''
      }
    },
  },
}
</script>
<style scoped>
.account-box {
  position: relative;
}
.tpic {
  position: absolute;
  right: -20px;
  top: 10px;
  font-size: 20px;
}
.add-teacher >>> .unit-select .el-cascader .el-input {
  width: 390px;
}
</style>